{% load i18n %}
<script type="text/javascript" src="/static/js/ui/packed/ui.core.packed.js"></script>
<script type="text/javascript" src="/static/js/ui/packed/ui.sortable.packed.js"></script>

<h2>{{ pageTitle }}</h2>

{% ifnotequal key 'highlight' %}
<p>
	<b><label for="playlistTitle">{% trans "Title" %}:</label></b> 
	<input type="input" size="50" name="playlistTitle" id="playlistTitle" maxlength="100" value="{{ title }}"/>
</p>
{% ifequal key 'new' %}
	{% if user %}
	<p>
		{% trans "The playlist will be saved in" %} <a href="/playlist/myplaylist">{% trans "My Playlists" %}</a>
	</p>
	{% else %}
	<p class="red">
		{% trans "NOTICE: This playlist will not be editable after created!" %}<br/>
		{% trans "If you wish to save to an editable playlist," %} <a href="{{ loginURL }}">{% trans "please login using Google account first." %}</a>
	</p>
	{% endif %}
{% endifequal %}
{% endifnotequal %}
<hr/>
<p>
	<b>{% trans "Playlist videos" %}:</b> ({% trans "Drag the video item to sort" %})
</p>
<ul id="playlist">
	{% for videoID in videoIDs %}
		<li id="{{ videoID }}"><img src="/static/images/ajax-loader.gif" width="12" height="12"/>({% trans "Loading" %}...)</li>
	{% endfor %}
</ul>
<hr/>
<p>
	<b><label for="addVideoURL">{% trans "Add From YouTube URL" %}:</label></b> 
	<input type="input" size="40" name="addVideoURL" id="addVideoURL" maxlength="100" 
		onclick="javascript:$('#addVideoURL').select();"
		onkeypress="javascript:if (onEnter(event)) addVideo();"/>
	<button onclick="javascript:addVideo();">{% trans "Add Video" %}</button>
</p>

{% ifnotequal key 'highlight' %}
<p id="addHighlightVideos" style="display: none;">
	<label for="selectHighlightVideos">Add From highlight videos:</label> 
	<select id="selectHighlightVideos" name="selectHighlightVideos">
	</select>
	<button onclick="javascript:addVideoFromHighlight();">{% trans "Add from highlight video" %}</button>
</p>
{% endifnotequal %}

<p>
	<button id="savePlaylistButton" onclick="javascript:savePlaylist();">
	{% ifequal key 'highlight' %}
		{% trans "Save highlight video list" %}
	{% else %}
		{% trans "Save playlist" %}
	{% endifequal %}
	</button>
	<button onclick="javascript:finishEdit();">
		{% trans "Cancel Edit" %}
	</button>
</p>

<script type="text/javascript">
<!--

function getVideoIDs() {
	var videoIDs = new Array();
	$('#playlist li').each(function(){
		videoIDs[videoIDs.length] = $(this).attr('id');
	});
	return videoIDs.join(',');
}

function isVideoIDinPlaylist(videoID) {
	var videoIDs = getVideoIDs();
	if (videoIDs.indexOf(videoID) >= 0) {
		return true;
	} else {
		return false;
	}
}

function addVideoFromHighlight() {
	var videoID = $('#selectHighlightVideos').attr('value');

	if (isVideoIDinPlaylist(videoID)) {
		alert('{% trans "This video has been already added" %}');
		return false;
	}

	$.getJSON('http://{{ siteHostname }}/channel/fetch?videoID='+videoID, function(data) {
		if (data.videoID) {
			$('#playlist').append('<li id="'+data.videoID+'"/>');
			$('#'+data.videoID).html(getItemHTML(data));
		} else {
			alert('{% trans "The video can not be added!\n The video might not exist any longer,\n or it might not be able to be embedded outside YouTube ..." %}'); 
		}
	});
	return true;
}

function addVideo() {
	var movieURL = $('#addVideoURL').attr('value');
	$('#addVideoURL').attr('value', '');
	if (!movieURL || '' == movieURL) {
		alert('{% trans "Please input YouTube movie URL!" %}');
		return false;
	}

	var videoID = checkYouTubeURL(movieURL); 

	if (null == videoID) {
		alert('{% trans "Please input valid YouTube movie URL!" %}');
		return false;
	}
	
	if (isVideoIDinPlaylist(videoID)) {
		alert('{% trans "This video has been already added" %}');
		return false;
	}

	$.getJSON('http://{{ siteHostname }}/channel/fetch?videoID='+videoID, function(data) {
		if (data.videoID) {
			$('#playlist').append('<li id="'+data.videoID+'"/>');
			$('#'+data.videoID).html(getItemHTML(data));
		} else {
			alert('{% trans "The video can not be added!\n The video might not exist any longer,\n or it might not be able to be embedded outside YouTube ..." %}'); 
		}
	});
	return true;
}

function deleteVideo(videoID) {
	if (!videoID) {
		return false;
	}
	$('#'+videoID).remove();
	return true;
}

function finishEdit() {
	$('#editBox').css('display', 'none');
	$('#editLink').css('display', '');
	if ($('#buildPlaylist').length > 0) {
		$('#buildPlaylist').css('display', '');
	}
}

function savePlaylist() {
	var videoIDs = getVideoIDs();
	var title = $('#playlistTitle').attr('value');
	
	$('#savePlaylistButton').attr('disabled', 'true');
	if ('' == videoIDs) {
		alert('{% trans "No videos in the playlist! Add some videos to save the playlist." %}');
		$('#savePlaylistButton').attr('disabled', null);
		return false;
	} else if ('' == title && ('highlight' != '{{ key }}')) {
		alert('{% trans "Please enter playlist title!" %}');
		$('#savePlaylistButton').attr('disabled', null);
		return false;
	}
	if ('highlight' == '{{ key }}') {
		setCookie('highlightVideos', videoIDs);
		alert('{% trans "Save successful!" %}');
		document.location.href = document.location.href;
	} else {
		$.post('http://{{ siteHostname }}/playlist/edit/{{ key }}?save=1', 
			{videoIDs : videoIDs, title: title}, 
			function(data) {
				if (data.success == "1") {
					alert('{% trans "Save successful!" %}');
{% ifequal key "new" %}
					document.location.href = 'http://{{ siteHostname }}/playlist/'+data.key;
{% else %}
					document.location.href = document.location.href;
{% endifequal %}
				} else {
					alert('{% trans "Save failed! You might have logged out..." %}');
				}
			}, 'json');
	}
	$('#savePlaylistButton').attr('disabled', null);
}

function getItemHTML(data)
{
	return '<a href="javascript:;">'+data.videoTitle
			+ '<span class="tooltip"><img src="'+data.thumbURL+'"/></span></a>'
			+ ' [ <a href="javascript:;" onclick="javascript:deleteVideo(\''+data.videoID+'\');">'
			+ '{% trans "Delete" %}</a> ]';
}

$(function(){
	$('#playlist li').each(function(){
		var videoID = $(this).attr('id');
		$.getJSON('http://{{ siteHostname }}/channel/fetch?videoID='+videoID, function(data) {
			$('#'+data.videoID).html(getItemHTML(data));
		});
	});
	
	var highlightVideos = $.cookie('highlightVideos');
	if (highlightVideos) {
		var hlvideoList = highlightVideos.split(',');
		var i = 0;
		for (i=0; i<hlvideoList.length; i++) {
			var videoID = hlvideoList[i];
			$('#selectHighlightVideos').append('<option id="hl'+videoID+'" value="'+videoID+'"><img src="/static/images/ajax-loader.gif" width="12" height="12"/>({% trans "Loading" %}...)</option>');
			$.getJSON('http://{{ siteHostname }}/channel/fetch?&videoID='+videoID, function(data) {
				$('#hl'+data.videoID).html(data.videoTitle);
			});
		}
		$('#addHighlightVideos').css('display', '');
	}
	
	$('#playlist').sortable({'tolerance':'50'});
})
-->
</script>